<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :inline="true" size="mini" disabled label-width="100px">
      <el-collapse v-model="model">
        <el-collapse-item title="基本信息" name="1" >
          <el-form-item label="店面代码" prop="dealerCompanyId" ><el-input v-model="form.dealerCompanyId" size="mini" class="search-input" placeholder="店面代码" disabled /></el-form-item>
          <el-form-item label="公司名称" prop="dealerName" ><el-input v-model="form.dealerName" size="mini" class="search-input" placeholder="工商注册名称" disabled /></el-form-item>

          <el-form-item label="店面简称" prop="shortName" ><el-input v-model="form.shortName" size="mini" class="search-input" placeholder="店面简称" disabled /></el-form-item>
          <el-form-item label="店面级别" prop="kdgrp" ><r-select v-model="form.kdgrp" type="1547" class="search-input" disabled/></el-form-item>
          <el-form-item label="大区" prop="bzirk" ><r-select v-model="form.bzirk" type="1546" class="search-input" disabled/></el-form-item>
          <el-form-item label="省" prop="province">
            <el-select v-model="form.province" placeholder="请选择" class="search-input" disabled @change="changeProvince">
              <el-option
                v-for="item in provinceOptions"
                :key="item.region_id"
                :label="item.region_name"
                :value="item.region_id"/>
            </el-select>
          </el-form-item>
          <el-form-item label="市" prop="city">
            <el-select v-model="form.city" placeholder="请选择" class="search-input" disabled @change="changeCity">
              <el-option
                v-for="item in cityOptions"
                :key="item.region_id"
                :label="item.region_name"
                :value="item.region_id"/>
            </el-select>
          </el-form-item>
          <el-form-item label="区县" prop="county">
            <el-select v-model="form.county" placeholder="请选择" class="search-input" disabled>
              <el-option
                v-for="item in countyOptions"
                :key="item.region_id"
                :label="item.region_name"
                :value="item.region_id"/>
            </el-select>
          </el-form-item>
          <el-form-item label="公司地址" prop="address" ><el-input v-model="form.address" size="mini" style="width:415px;" placeholder="公司地址" disabled/></el-form-item>
          <el-form-item label="纳税人识别号" prop="taxnumxl" ><el-input v-model="form.taxnumxl" size="mini" class="search-input" placeholder="纳税人识别号" disabled/></el-form-item>
          <el-form-item label="工商备案电话" prop="homeCity" ><el-input v-model="form.homeCity" size="mini" class="search-input" placeholder="工商备案电话" disabled/></el-form-item>
          <el-form-item label="联系人（总经理）" prop="houseNum2" ><el-input v-model="form.houseNum2" size="mini" class="search-input" placeholder="联系人（总经理）" disabled/></el-form-item>
          <el-form-item label="联系方式" prop="mobileNumber" ><el-input v-model="form.mobileNumber" size="mini" class="search-input" placeholder="联系方式" disabled/></el-form-item>
          <el-form-item label="税局备案银行开户行名称" prop="accountBankName" ><el-input v-model="form.accountBankName" size="mini" class="search-input" placeholder="税局备案银行开户行名称" disabled/></el-form-item>
          <el-form-item label="税局备案银行账号" prop="bankAccount" ><el-input v-model="form.bankAccount" size="mini" class="search-input" placeholder="税局备案银行账号" disabled/></el-form-item>
          <el-form-item label="税局备案地址" prop="street" ><el-input v-model="form.street" size="mini" class="search-input" placeholder="税局备案地址" disabled/></el-form-item>
          <el-form-item label="税局备案电话" prop="telNumber" ><el-input v-model="form.telNumber" size="mini" class="search-input" placeholder="税局备案电话" disabled/></el-form-item>
          <el-form-item label="销售银行开户名称" prop="salesAccountBankName" ><el-input v-model="form.salesAccountBankName" size="mini" class="search-input" placeholder="销售银行开户名称" disabled/></el-form-item>
          <el-form-item label="银行账号：销售" prop="salesAccountBank" ><el-input v-model="form.salesAccountBank" size="mini" class="search-input" placeholder="银行账号：销售" disabled/></el-form-item>
          <el-form-item label="售后银行开户名称" prop="afterSalesAccountBankName" ><el-input v-model="form.afterSalesAccountBankName" size="mini" class="search-input" placeholder="售后银行开户名称" disabled/></el-form-item>
          <el-form-item label="银行账号：售后" prop="afterSalesAccountBank" ><el-input v-model="form.afterSalesAccountBank" size="mini" class="search-input" placeholder="银行账号：售后" disabled/></el-form-item>
          <el-form-item label="财务负责人电话" prop="building" ><el-input v-model="form.building" size="mini" class="search-input" placeholder="财务负责人电话" disabled/></el-form-item>
          <el-form-item label="发票邮寄收件人" prop="location" ><el-input v-model="form.location" size="mini" class="search-input" placeholder="发票邮寄收件人" disabled/></el-form-item>
          <el-form-item label="发票邮寄收件电话" prop="city2" ><el-input v-model="form.city2" size="mini" class="search-input" placeholder="发票邮寄收件电话" disabled/></el-form-item>
          <el-form-item label="发票邮寄地址" prop="strSuppl2" ><el-input v-model="form.strSuppl2" size="mini" class="search-input" placeholder="发票邮寄地址" disabled/></el-form-item>
          <el-form-item label="紧急联系人" prop="floor" ><el-input v-model="form.floor" size="mini" class="search-input" placeholder="紧急联系人" disabled/></el-form-item>
          <el-form-item label="紧急联系电话" prop="strSuppl1" ><el-input v-model="form.strSuppl1" size="mini" class="search-input" placeholder="紧急联系电话" disabled/></el-form-item>
          <el-form-item label="DMS系统管理员" prop="houseNum1" ><el-input v-model="form.houseNum1" size="mini" class="search-input" placeholder="DMS系统管理员" disabled/></el-form-item>
          <el-form-item label="管理员联系电话" prop="bahns" ><el-input v-model="form.bahns" size="mini" class="search-input" placeholder="管理员联系电话" disabled/></el-form-item>
          <el-form-item label="网管邮箱地址" prop="smtpAddr" ><el-input v-model="form.smtpAddr" size="mini" class="search-input" placeholder="网管邮箱地址" disabled/></el-form-item>
          <el-form-item label="网络供应商" prop="katr1" ><r-select v-model="form.katr1" type="1541" class="search-input" disabled/></el-form-item>
          <el-form-item label="网络类型" prop="katr2" ><r-select v-model="form.katr2" type="1542" class="search-input" disabled/></el-form-item>
          <el-form-item label="网络宽带" prop="katr3" ><r-select v-model="form.katr3" type="1543" class="search-input" disabled/></el-form-item>
          <el-form-item label="使用人数" prop="locco" ><el-input v-model="form.locco" size="mini" class="search-input" placeholder="使用人数" disabled/></el-form-item>
          <el-form-item label="冻结标识" prop="freeze" ><r-select v-model="form.freeze" type="1004" class="search-input" disabled/></el-form-item>
        </el-collapse-item>
        <el-collapse-item title="销售信息" name="2">
          <el-form-item label="销售大区" prop="salesAreaName" >
            <el-input v-model="form.salesAreaName" class="search-input" />
          </el-form-item>
          <el-form-item label="销售权限" prop="salesAuthority" ><r-select v-model="form.salesAuthority" type="1004" class="search-input"/></el-form-item>
          <el-form-item label="销售代码" prop="salesCode" ><el-input v-model="form.salesCode" size="mini" class="search-input" placeholder="销售代码" /></el-form-item>
          <el-form-item label="销售组织" prop="salesOrganization" ><r-select v-model="form.salesOrganization" type="1544" class="search-input" disabled/></el-form-item>
          <el-form-item label="指定售后代理商" prop="designatedAfterSalesDealer" >
            <el-input v-model="form.designatedAfterSalesDealerName" class="search-input" readonly/>
          </el-form-item>
          <el-form-item v-show="false" label="销售组织名称" prop="salesName"><el-input v-model="form.salesName" size="mini" class="search-input" placeholder="销售组织名称" /></el-form-item>
        </el-collapse-item>
        <el-collapse-item title="售后信息" name="3">
          <el-form-item label="售后大区" prop="AftersaleAreaName" >
            <el-input v-model="form.AftersaleAreaName" class="search-input" readonly/>
          </el-form-item>
          <el-form-item label="售后权限" prop="afterSaleAuthority" ><r-select v-model="form.afterSaleAuthority" type="1004" class="search-input"/></el-form-item>
          <el-form-item label="售后代码" prop="afterSaleCode" ><el-input v-model="form.afterSaleCode" size="mini" class="search-input" placeholder="售后代码" /></el-form-item>
          <el-form-item label="零件接收地址" prop="strSuppl3" ><el-input v-model="form.strSuppl3" size="mini" class="search-input" placeholder="零件接收地址" disabled/></el-form-item>
          <el-form-item label="零件接收联系人" prop="roomnumber" ><el-input v-model="form.roomnumber" size="mini" class="search-input" placeholder="零件接收联系人" disabled/></el-form-item>
          <el-form-item label="零件接收联系电话" prop="nameCo" ><el-input v-model="form.nameCo" size="mini" class="search-input" placeholder="零件接收联系电话" disabled/></el-form-item>
          <el-form-item label="代理商星级" prop="dealerStarLevel" ><r-select v-model="form.dealerStarLevel" type="1089" class="search-input" clearable/></el-form-item>
        </el-collapse-item>
      </el-collapse>
      <el-form-item v-show="false" label="客户类型" prop="customerType"><r-select v-model="form.customerType" type="1545" class="search-input"/></el-form-item>
    </el-form>
  </div>
</template>

<script>
import _ from 'lodash'
// import filtercode from '@/components/Checkbox/filtercode'
import formMixins from '@/mixins/formMixins'
import rSelect from '@/components/Select/Select'
import { mapGetters } from 'vuex'
import { getDealerCompanyByCode } from '@/api/admin/org/dealerInfo.js'
export default {
  name: 'DmsDealerCompany',
  components: {
    rSelect
  },
  mixins: [formMixins],
  data() {
    return {
      showAfterDealer: false,
      model: ['1', '2', '3'],
      form: {},
      provinceOptions: [],
      cityOptions: [],
      countyOptions: []
    }
  },
  computed: {
    ...mapGetters(['dictMap', 'regionMap'])
  },
  mounted() {
    this.searchHandle()
    const array = Object.values(this.regionMap)
    this.provinceOptions = array
  },
  methods: {
    searchHandle() {
      getDealerCompanyByCode()
        .then(res => {
          res.province = Number(res.province)
          res.city = Number(res.city)
          res.county = Number(res.county)
          res.salesOrganization = Number(res.salesOrganization) === 0 ? '' : Number(res.salesOrganization)
          res.bzirk = Number(res.bzirk) === 0 ? '' : Number(res.bzirk)
          res.kdgrp = Number(res.kdgrp) === 0 ? '' : Number(res.kdgrp)
          res.katr1 = Number(res.katr1) === 0 ? '' : Number(res.katr1)
          res.katr2 = Number(res.katr2) === 0 ? '' : Number(res.katr2)
          res.katr3 = Number(res.katr3) === 0 ? '' : Number(res.katr3)

          this.form = _.cloneDeep(res)
          this.setOptions()
        })
        .catch(err => {
        })
    },

    cancel() {
      this.$emit('cancel', '')
    },
    changeProvince() {
      const p = this.form.province
      this.cityOptions = this.regionMap[p].children
      this.$set(this.form, 'city', '')
      this.$set(this.form, 'county', '')
    },
    changeCity() {
      const p = this.form.province
      const c = this.form.city
      this.$set(this.form, 'county', '')
      this.countyOptions = this.regionMap[p].children[c].children
    },
    setOptions() {
      const p = this.form.province
      this.cityOptions = this.regionMap[p].children
      const c = this.form.city
      this.countyOptions = this.regionMap[p].children[c].children
    }

  }
}
</script>

<style scoped>
.magnifier {
  float:right;
  position :absolute;
  right: 50PX;
  top: 23px;
  cursor: pointer;
}
</style>
